import React, { useState, useEffect } from 'react';

import { NavBar, Icon, Flex, Button, Modal, List, InputItem, Toast, ImagePicker } from 'antd-mobile';

import { createForm } from 'rc-form'
import { GetTutorActionDetails } from '@/api/login.js'

import './my.scss';

import header from "@/assets/svg/header.svg"
import { Link, withRouter } from 'react-router-dom';
import { logout as logoutOfTutor, GetTutorCheckCode as GetCheckCode, uploadPict, previewPict, postUpdatePhoto } from "@/api/login.js";
import { updatePhoneOfTutor, getPhoneCodeForUpdatePhone } from "@/api/tutor/tutor";

import { GetListResume, getStudentDetails } from "@/api/tutor/biographicalNotes.js"

import { R, VOID } from "@/assets/js/dict"


const prompt = Modal.prompt;

const confirm = Modal.alert;

function My (props) {
    const [userInfoDetailsObject, setUserInfoDetailsObject] = useState({ pict: '', photo: '' })
    let [selectedTab, setSelectedTab] = useState('index'); // 相当于 this.state
    let [resumeList, setResumeList] = useState([]);  // 简历列表信息
    let [hidden, setShow] = useState(false); // 相当于 this.state
    let [files, setFiles] = useState([])
    const [imgObject, SetImgObject] = useState({});
    const { getFieldProps } = props.form;
    const userInfo = JSON.parse(sessionStorage.getItem('userInfo'));


    /**
     * 退出登录
     */
    function logout () {
        sessionStorage.removeItem("roleVal");
        sessionStorage.removeItem('userInfo');
        localStorage.removeItem("token");

        logoutOfTutor((res) => {
            if (res.code == '000000') {
                props.history.push("/login/TUTOR");
            }
        });
    }




    useEffect(() => {
        // 查看家教详细信息
        let postData = {};
        postData.tutor_id = JSON.parse(sessionStorage.getItem('userInfo')).id;  // 家教ID 

        GetTutorActionDetails(postData).then(res => {
            if (res.code == '000000') {
                console.log('res -------->>>', res);
                setUserInfoDetailsObject(res.responseData)
            }
        }).catch(err => {

        })
    }, [])


    function FunctionBlock () {
        console.log('my ----->>>', props);
        return (
            <li>
                <Link to="/userInfo">
                    <i className="icon notes"></i>
                    基本信息
                </Link>
            </li>
        )
    }

    return (
        <div className="my">
            <div className="page-title my-tit">
                <NavBar
                    mode="light"
                >
                    我的
                </NavBar>
            </div>
            <div className="page-content my-con">
                <div className="my-icon-bg">
                    <div>
                        {
                            userInfoDetailsObject.photo ? <img src={previewPict(userInfoDetailsObject.photo)} /> : <img src={header} />
                        }

                        <div>
                            <strong>{userInfo.username}</strong>
                        </div>
                    </div>
                    <ul>
                        {FunctionBlock()}
                        <li>
                            <Link to="/resumeList">
                                <i className="icon underway"></i>
                                家教简历
                            </Link>
                        </li>

                    </ul>
                </div>

                {/* 简历列表 
                <ol className="childrens-list">
                    <h4>简历列表：</h4>
                    {resumeListFn()}                    
                </ol>
                */}
                <ol className="my-list">
                    <li>
                        <Link to="/commonPoblem">
                            <i className="icon helps"></i>
                            <span>常见问题解答</span>

                            <Icon type={'right'} />
                        </Link>
                    </li>
                    <li>
                        <Link to="/customerService">
                            <i className="icon customerService"></i>
                            <span>客服中心</span>

                            <Icon type={'right'} />
                        </Link>
                    </li>
                </ol>
                
                <Flex justify="center" direction="row" wrap="wrap">
                    <Flex.Item><Button onClick={logout} type="primary" style={{ margin: '5%' }}>退出登录</Button></Flex.Item>
                </Flex>
            </div>

        </div>
    );
}

My = createForm()(My);

export default withRouter(My);